<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
	corpDetailsVisible: Boolean,
	default: false
})
onMounted(() => {})
const emits = defineEmits(['changeCorpDetailsVisible'])
const close = () => {
	emits('changeCorpDetailsVisible', false)
	myCharts.dispose()
}
let myCharts = ''
const openCharts = () => {
	// 需要获取到element,所以是onMounted的Hook
	myCharts = echarts.init(document.getElementById('charts'))
	// 绘制图表
	myCharts.setOption({
		xAxis: {
			data: ['2020-10-18', '2020-10-19', '2020-10-20', '2020-10-21', '2020-10-22', '2020-10-23', '2020-10-24']
		},
		yAxis: {
			name: '发送次数'
		},
		tooltip: {
			trigger: 'axis'
			// formatter:function (params){
			// let res ='<p>'+params[0].data.name+'</p>'
			// return res
			// }
		},
		series: [
			{
				name: '用户量',
				type: 'line',
				data: [0, 0, 0, 0, 0, 0, 0],
				itemStyle: {
					borderRadius: [0, 5, 5, 0],
					color: '#1890ff'
				},
				lineStyle: {
					color: '#1890ff'
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: 'rgba(32,142,255,0.8)'
							},
							{
								offset: 0.4,
								color: 'rgba(32,142,255,0.3)'
							},
							{
								offset: 1,
								color: 'rgba(32,142,255,0.00)'
							}
						])
					}
				}
			}
		]
	})
	window.onresize = function () {
		// 自适应大小
		myCharts.resize()
	}
}
onBeforeUnmount(() => {
	if (myCharts != '') {
		myCharts.dispose()
	}
})
const queryForm = ref({
	time: '',
	date: ''
})
const options = ref([
	{
		id: 1,
		value: '昨日'
	},
	{
		id: 2,
		value: '近一周'
	},
	{
		id: 3,
		value: '近一月'
	}
])
</script>
<template>
	<el-dialog
		v-model="props.corpDetailsVisible"
		:center="true"
		title="发送详情"
		width="1200px"
		@close="close"
		@opened="openCharts"
	>
		<!-- id="details-charts" -->
		<div class="details-charts">
			<div class="heaedr-input">
				<el-select
					v-model="queryForm.time"
					style="width: 10%; margin-right: 32px"
					filterable
					allow-create
					default-first-option
					:reserve-keyword="false"
					placeholder="选择日期"
				>
					<el-option v-for="item in options" :key="item.id" :label="item.value" :value="item.id" />
				</el-select>
				<div style="width: 29%">
					<span>自定义：</span>
					<el-date-picker
						style="width: 70%; margin-right: 32px"
						v-model="queryForm.date"
						type="daterange"
						range-separator="~"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
					/>
				</div>
				<p class="tips-info">*每日的发送次数从8.13号后开始统计</p>
			</div>
		</div>
		<div class="charts" id="charts"></div>
	</el-dialog>
</template>
<style lang="scss" scoped>
.tips-info {
	line-height: 32px;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.45);
}
.details-charts {
	width: 100%;
	.heaedr-input {
		display: flex;
		align-items: center;
	}
}
.charts {
	width: 100%;
	height: 500px;
	margin-left: -7%;
}
</style>
